<!--
  * 水源表
  *
-->
<template>
  <a-modal
      :title="form.id ? '编辑' : '添加水源表'"
      width="60%"
      :open="visibleFlag"
      @cancel="onClose"
      :maskClosable="false"

      :destroyOnClose="true"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span:8 }"  style="height: 600px;overflow-y: auto">
          <a-row>
                <a-col :span="12">
                      <a-form-item label="水源名称"  name="name">
                        <a-input style="width: 70%" v-model:value="form.name" placeholder="水源名称" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="水源类型"  name="type">
                        <a-input style="width: 70%" v-model:value="form.type" placeholder="水源类型" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="所属单位"  name="gqId">
                        <a-select
                            style="width: 70%"
                            v-model:value="form.gqId">
                          <a-select-option :value="item.id" v-for="(item,index) in  gqListData" :key="index">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                </a-col>
            <a-col :span="12">
              <a-form-item label="资源依靠"  name="zyyk">
                <a-input style="width: 70%" v-model:value="form.zyyk" placeholder="资源依靠" />
              </a-form-item>
            </a-col>

                <a-col :span="12">
                      <a-form-item label="引水流量(m³/s)"  name="ysll">
                        <a-input-number style="width: 70%" v-model:value="form.ysll" placeholder="引水流量(m³/s)" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="年设计供水量(m³)"  name="nsjgsl">
                        <a-input-number  style="width: 70%" v-model:value="form.nsjgsl" placeholder="年设计供水量(m³)" />
                      </a-form-item>
                </a-col>
            <a-col :span="24" >
              <a-form-item  label="详细地址"  name="address" :label-col="{ span:4 }">
                <a-input style="width: 90%" v-model:value="form.address" placeholder="详细地址" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="封面图片"  name="coverImage" :label-col="{ span:4 }">
                <FileUpload
                    v-model:value="form.coverImage"
                  list-type="picture-card"
                  :maxUploadSize="1"
                  buttonText="点击上传图片"
                  :defaultFileList="fileList"
                  :multiple="true"
                  @change="coverImageChange"
                  :folder="FILE_FOLDER_TYPE_ENUM.COMMON.value"
              />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="图片"  name="images" :label-col="{ span:4 }">
                <FileUpload
                    v-model:value="form.images"
                    list-type="picture-card"
                    :maxUploadSize="10"
                    buttonText="点击上传图片"
                    :defaultFileList="imagesfileList"
                    :multiple="true"
                    @change="imageChange"
                    :folder="FILE_FOLDER_TYPE_ENUM.COMMON.value"
                />
              </a-form-item>
            </a-col>
                <a-col :span="24">
                      <a-form-item label="资料记载"  name="zljz" :label-col="{ span:4 }">
<!--                        <a-textarea style="width: 90%" v-model:value="form.zljz" placeholder="资料记载" />-->
                        <Wangeditor  @update:model-value="wangeditorChange" style="width: 90%" ref="contentRef" :modelValue="form.zljz" :height="wangeditorHeight"  />
                      </a-form-item>
                </a-col>
          </a-row>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick } from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { sourceOfWaterApi } from '/@/api/water/source/source-of-water-api.js';
  import { smartSentry } from '/@/lib/smart-sentry';
  import {infoApi} from "/@/api/water/info/info-api.js";
  import {FILE_FOLDER_TYPE_ENUM} from "/@/constants/support/file-const.js";
  import FileUpload from "/@/components/support/file-upload/index.vue";
  import Wangeditor from "/@/components/framework/wangeditor/index.vue";

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList']);

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false);
  let fileList=ref([])
  let imagesfileList=ref([])
let gqListData=ref([])
  const  wangeditorHeight =300//富文本高度
  function show(rowData) {
    Object.assign(form, formDefault);
    if (rowData && !_.isEmpty(rowData)) {
      Object.assign(form, rowData);
      if(form.coverImage){
        try {
          fileList.value[0]=JSON.parse(form.coverImage)
        }catch (e) {
          console.error('解析封面图片报错',e)
        }

      }
      if(form.images){
        try {
          imagesfileList.value=JSON.parse(form.images)
          form.images= imagesfileList.value
        }catch (e) {
          console.error('解析图片报错',e)
        }

      }
    }
    visibleFlag.value = true;
    queryData()
    nextTick(() => {
      formRef.value.clearValidate();
    });

  }
  // 查询数据
  async function queryData() {
    try {
      const gqList = await infoApi.queryOptionsScopeIrrigationTree({});
      if (gqList.data && gqList.data.length > 0) {
        gqListData.value= gqList.data
      }
    } catch (e) {
      smartSentry.captureError(e);
    }
  }
  function onClose() {
    Object.assign(form, formDefault);
    visibleFlag.value = false;
  }

  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref();

  const formDefault = {
              id: undefined, //ID
              name: undefined, //水源名称
              type: undefined, //水源类型
              gxdw: undefined, //管辖单位、所ID
              gqId: undefined, //所属灌区
              province: undefined, //省
              city: undefined, //市
              area: undefined, //区
              address: undefined, //地址
              ysll: undefined, //引水流量(m³/s)
              nsjgsl: undefined, //年设计供水量(m³)
              zyyk: undefined, //资源依靠
              zljz: undefined, //资料记载
              coverImage: undefined, //封面图片
              images: undefined, //图片
              createTime: undefined, //创建时间
              createUser: undefined, //创建人
              modifyTime: undefined, //更新时间
              modifyUser: undefined, //更新人
  };

  let form = reactive({ ...formDefault });

  const rules = {
    name: [{ required: true, message: '水源名称 必填' }],
    type: [{ required: true, message: '水源类型 必填' }],

    gqId: [{ required: true, message: '所属灌区 必填' }],
    zljz: [{ required: true, message: '资料记载 必填' }],
    coverImage: [{ required: true, message: '封面图片 必填' }],

    images: [{ required: true, message: '图片 必填' }],
    gxdw: [{ required: true, message: '所属单位 必填' }],
    address: [{ required: true, message: '详细地址 必填' }],
    ysll: [{ required: true, message: '引水流量(m³/s) 必填' }],
    nsjgsl: [{ required: true, message: '年设计供水量(m³) 必填' }],
    zyyk: [{ required: true, message: '资源依靠 必填' }],

  };
// 封面图片上传
  function  coverImageChange(fill){
    form.coverImage=JSON.stringify(fill[0])
    // 触发表单字段验证
    nextTick(() => {
      formRef.value.validateFields('coverImage');
    });
  }
// 封面图片上传
  function  imageChange(fill){
    form.images=fill
    // 触发表单字段验证
    nextTick(() => {
      formRef.value.validateFields('images');
    });
  }
  //富文本
 function wangeditorChange(html){
   html= html == '<p><br></p>' || html == '<p></p>' || !html  ? '' : html;
     form.zljz=html
     // 触发表单字段验证
     nextTick(() => {
       formRef.value.validateFields('zljz');
     });
 }
  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    if (form.images.length>0) {
      form.images = JSON.stringify(form.images)
    }
    try {
      if (form.id) {
        await sourceOfWaterApi.update(form);
      } else {
        await sourceOfWaterApi.add(form);
      }
      message.success('操作成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    show,
  });
</script>
